<script lang="ts" setup>
import type { StateType } from './types';
import { useVbenModal ,z} from '@vben/common-ui';
import { $t } from '@vben/locales';
import {
  Card,
  message,
  Select,
  SelectOption,
  TabPane,
  Tabs,
} from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { getPageInfo_news, postPage_news, putPage_news,getPage_carByname } from '#/api/portal/vechiledetail';
import { usePreferencesStore } from '#/store';
import { getPage_news as car_model } from '#/api/portal/carmodel';
const detail =ref();
const disabled = ref(true);
const state: StateType = reactive({
  form: {
    post_title: '',
    post_alias: '',
    more: {
      thumbnail: '',
    },
  },
  pageThemeFiles: [],
});
const [BasicForm, BasicFormApi] = useVbenForm({
  handleSubmit: onSubmit,
  resetButtonOptions: {
    show: false,
  },
  submitButtonOptions:{
    show:false
  },
  commonConfig: {
    
  },
  schema: [
    {
      component: 'Input',
      dependencies: {
        show: false,
        // 随意一个字段改变时，都会触发
        triggerFields: ['id'],
      },
      fieldName: 'id',
      label: 'ID',
    },


    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'name',
      label: `属性`,
       rules: z.string().max(30,'字符不能超过30'),
    },
    {
      component: 'Input',
      defaultValue: '',
      dependencies: {
        trigger: (values) => {
          disabled.value = !values.news_title;
          state.form.name = values.name;
          state.form.title = values.title;
          state.form.des = values.des;
          state.form.images = values.images;
        },
        // 随意一个字段改变时，都会触发
        triggerFields: [
          'id',
          'title',
          'name',
          'des',
          'images',
        ],
      },
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'title',
      label: `标题`,
      rules: z.string().max(150,'标题不能超过150'),
    },
 

    {
      component: 'Textarea',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
        style: {
          height: '150px',
        },
      },
      fieldName: 'des',
      label: `描述`,
    },

    {
      component: 'Upload',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'images',
      label: `缩略图`,
    },

  ],
});
async function onSubmit() {
  const values: any = state.form;
  values.isUpdata=true;
   GroupModalApi.setData(values);
  message.success( '操作成功');
}

const [GroupModal, GroupModalApi] = useVbenModal({
  fullscreenButton: false,
  async onCancel(){
       GroupModalApi.close();
  },
  async onConfirm() { 
    await onSubmit();
    GroupModalApi.close();
  },
  async onOpenChange(isOpen) {
        if (isOpen) {
            const modalData: any = await GroupModalApi.getData();

             const post = {
                    id: modalData.row?.id ?? undefined,
                    title: modalData.row?.title ?? '',
                    name: modalData.row?.name ?? '',
                    des: modalData.row?.des ?? '',
                    images: modalData.row?.images ?? [],
                    car_model:modalData.row?.car_model??'',
                    _X_ROW_KEY:modalData.row?._X_ROW_KEY??''
            };
                state.form = post;
                BasicFormApi.setValues({ ...state.form});
                
        }
  }
});
</script>
<template>
    <GroupModal>
        <Page>
            <Card :title="`详情`">
            <BasicForm />
            </Card>
        </Page>
    </GroupModal>
</template>